<template>
  <div id="visualData4">
    <div class="button-wrapper">
      <div class="title_device_state">
        <span>设备状态：</span>
        <span class="device_state">{{ state ? '运行中' : '已停止' }}</span>
      </div>
      <button class="visualData4_button" role="button" @click="changeShow">{{ videoShow ? 'Web Service' : 'Live Video' }}</button>
    </div>
    <div v-if="videoShow">
      <div>
        <iframe
          src="https://open.ys7.com/ezopen/h5/iframe?url=ezopen://open.ys7.com/FD3125355/1.hd.live&autoplay=1&accessToken=at.6f7kwm424l71kw5a3bqvvt70akk48l7y-8dwq63thu7-0yj07hh-xfhn1skbd"
          width="600"
          height="400"
          id="ysOpenDevice"
          allowfullscreen
        ></iframe>
      </div>
    </div>
    <div v-else>
      <img class="visualData4_img" :src="imagePath" alt="超图">
    </div>
  </div>
</template>

<script>
import { getVideoUrl } from '@/api/screen/screen'

export default {
  data() {
    return {
      videoShow: true,
      imagePath: require('@/assets/images/image1.png'),
      state: true,
      videoUrl: '/video/1.mp4' // 视频文件路径
    };
  },
  mounted() {
    this.fetchData();
    this.scheduleNextVideoFetch();
  },
  methods: {
    changeShow() {
      this.videoShow = !this.videoShow;
    },
    fetchData() {
      getVideoUrl().then(res => {
        console.log(res);
        this.videoUrl = res.data[0];
      });
    },
    scheduleNextVideoFetch() {
      this.videoFetchTimer = setInterval(() => {
        this.fetchData(); // 每0.5分钟执行一次
      }, 1000 * 60 * 5); // 转换为毫秒
    },
  }
};
</script>

<style scoped lang="scss">
#visualData4 {
  padding: 1em;
}

iframe {
  width: 100%;
  height: 515px;
  border: none;
}

.visualData4_img {
  width: 100%;
  height: 515px;
}

.title_device_state {
  text-align: left;
  margin-top: 12px;
  font-size: 20px;
  letter-spacing: 2px;
  color: #ffffff;
  text-shadow:
    0 0 10px #d2b4ce,
    0 0 8px #008cff,
    0 0 2px #fff;

  .device_state {
    font-size: 26px;
    text-shadow:
      0 0 10px #6e7559,
      0 0 8px #83d52c,
      0 0 2px #fff;
  }
}

.button-wrapper {
  margin: 1rem;
  display: flex;
  justify-content: space-between;
}

.visualData4_button:hover {
  background-color: #1795bb;
}

.visualData4_button:active {
  background-color: #1795bb;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.visualData4_button {
  padding: 0.6em 2em;
  border: none;
  outline: none;
  color: rgb(255, 255, 255);
  background: #9fb9c4;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: 15rem;
  height: 3rem;
  font-size: 1.3rem;
}

.visualData4_button:before {
  content: "";
  background: linear-gradient(
      45deg,
      #5baee8,
      #06c0f8,
      #6d97b6
  );
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing-visualData4_button 20s linear infinite;
  transition: opacity 3s ease-in-out;
  border-radius: 10px;
}

@keyframes glowing-visualData4_button {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}

.visualData4_button:after {
  z-index: -1;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #1e4577;
  left: 0;
  top: 0;
  border-radius: 10px;
}
</style>
